import React, {PureComponent} from "react";
import {Button, Drawer, Icon, Input, Modal, Select, Table} from "antd";
import {queryDistCarList} from "../common/ApiUtils";
import {connect} from "react-redux";
import {saveCarData} from "./store/actionCreator";
import {List} from "immutable";
import RecordRideRouteComponent from "./RecordRideRouteComponent";
import EditCarWrapperComponent from "./EditCarComponent";
import EditOwnerWrapperComponent from "./EditOwnerComponent";
import AddCarWrapperComponent from "./AddCarComponent";


const Option = Select.Option;

/**
 * 车辆管理界面
 */
class CarManagerComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            formIn: {
                driverUserName: "",
                plateNumber: "",
                tagSerial: "",
                isActive: -1,
                defaultDept: 327
            },
            showRideRecord: false,
            showAddCar: false,
            showEditCar: false,
            showEditOwner: false,
            carMessage:null,   //当前点击的车辆
        };

        this.clickChargingDetail = this.clickChargingDetail.bind(this);
        this.clickWarningDetail = this.clickWarningDetail.bind(this);
        this.clickRideRecord = this.clickRideRecord.bind(this);
        this.clickCarEdit = this.clickCarEdit.bind(this);
    }

    render() {

        const {pageNumber, carMapData} = this.props;

        let tableCarData = [];

        if (carMapData.size > 0) {
            const currentPageData = carMapData.get(pageNumber);
            console.log("当前页码 数据");
            console.log(List.isList(currentPageData));
            console.log("转化之后的数据");
            tableCarData = currentPageData.toJS();
            console.log(tableCarData);
        }

        //todo 里面有几个数据是我使用其他字段代替的
        const columns = [
            {
                title: <div style={{textAlign: "center"}}>车牌号</div>,
                dataIndex: 'plateNumber',
                render: text => <div style={{textAlign: "center"}}>{text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>姓名</div>,
                dataIndex: 'driverUserName',
                render: text => <div style={{textAlign: "center"}}>{text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>终端号</div>,
                dataIndex: 'tagSerial',
                render: text => <div style={{textAlign: "center"}}>{text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>联系方式</div>,
                dataIndex: "driverHandphone",
                render: text => <div style={{textAlign: "center"}}>{text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>在线状态</div>,
                dataIndex: "onlineStatus",
                render: text => <div style={{textAlign: "center"}}><Icon type={"wifi"}/></div>
            },
            {
                title: <div style={{textAlign: "center"}}>报警状态</div>,
                dataIndex: "alarmStatus",
                render: text => <div style={{textAlign: "center"}}>{text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>充电详情</div>,
                dataIndex: "dictCarStatus",
                render: text => <div
                    style={{textAlign: "center"}}
                    onClick={this.clickChargingDetail}>
                    <Icon type={"copy"}/>
                </div>
            },
            {
                title: <div style={{textAlign: "center"}}>报警详情</div>,
                dataIndex: "driverUserUuid",
                render: text => <div
                    style={{textAlign: "center"}}
                    onClick={this.clickWarningDetail}>
                    <Icon type={"form"}/>
                </div>
            },
            {
                title: <div style={{textAlign: "center"}}>骑行记录</div>,
                dataIndex: "purchaseDate",
                render: text =>
                    <div style={{textAlign: "center", cursor: 'pointer'}}
                         onClick={()=>{
                             this.clickRideRecord(text)
                         }}
                    >
                        {text}
                    </div>
            },
            {
                title: <div style={{textAlign: "center"}}>车辆编辑</div>,
                dataIndex: "creator",
                render: (text, record) => <div
                    style={{textAlign: "center", cursor: 'pointer'}}
                    onClick={() => {
                        this.clickCarEdit(text, record)
                    }}>
                    <Icon type={"form"}/>
                </div>
            },
            {
                title: <div style={{textAlign: "center"}}>车主编辑</div>,
                dataIndex: "engineNumber",
                render: text =>
                    <div style={{textAlign: "center", cursor: 'pointer'}}
                         onClick={this.clickOwnerEdit}>
                        {123}
                    </div>
            }];

        // rowSelection object indicates the need for row selection
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
        };

        const pagination = {
            showQuickJumper: true,
            pageSize: 10,
            current: 1,
            onChange: this.clickPaginationPage,
            showTotal: this.showToTalView,
        };


        return (
            <div style={carWrapperStyle}>
                <div style={searchWrapperStyle}>
                    <span style={searchSpanStyle}>姓名</span>
                    <Input placeholder={"姓名"} style={inputStyle}/>

                    <span style={searchSpanStyle}>车牌号</span>
                    <Input placeholder={"车牌号"} style={inputStyle}/>

                    <span style={searchSpanStyle}>终端编号</span>
                    <Input placeholder={"终端编号"} style={inputStyle}/>

                    <span style={searchSpanStyle}>启用状态</span>

                    <Select defaultValue="全部">
                        <Option value="全部">全部</Option>
                        <Option value="启用">启用</Option>
                        <Option value="未启用">未启用</Option>
                    </Select>

                    <Button type={"primary"} htmlType={"button"} style={searchButtonStyle}>搜索</Button>
                </div>
                <div style={addWrapperStyle}>
                    <Button type={"primary"} htmlType={"button"} style={addButtonStyle}>添加车辆</Button>
                </div>
                <Table
                    rowKey={"id"}   //指定数据里面的字段
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={tableCarData}
                    pagination={pagination}
                    style={{margin: "0 12px"}}
                />

                <Modal
                    title={"骑行记录"}
                    visible={this.state.showRideRecord}
                    centered={true}
                    width={500}
                    onCancel={this.changeShowTag}
                    maskClosable={true}
                    footer={null}
                >
                    <RecordRideRouteComponent/>
                </Modal>


                <Drawer
                    title={"编辑车辆"}
                    visible={this.state.showEditCar}
                    width={500}
                    onClose={this.changeShowTag}
                    destroyOnClose={true}
                >
                    <EditCarWrapperComponent carMessage={this.state.carMessage}/>
                </Drawer>

                <Drawer
                    title={"编辑车主信息"}
                    visible={this.state.showEditOwner}
                    width={500}
                    onClose={this.changeShowTag}
                >
                    <EditOwnerWrapperComponent/>
                </Drawer>


                <Drawer
                    title={"添加车辆"}
                    visible={this.state.showAddCar}
                    width={500}
                    onClose={this.changeShowTag}
                >
                    <AddCarWrapperComponent/>
                </Drawer>
            </div>
        );
    }

    //https://www.sinomarinetech.com/tjpsc/dist/webCarManager/queryDistCarList?pageNumber=1&pageSize=10&deptId=327
    componentDidMount() {

        let data = {
            pageNumber: this.props.pageNumber,
            pageSize: 10
        };
        if (this.state.formIn.isActive !== -1) {
            data.isActive = this.formIn.isActive;
        }
        if (this.state.formIn.tagSerial) {
            data.tagSerial = this.formIn.tagSerial;
        }
        if (this.state.formIn.plateNumber) {
            data.plateNumber = this.formIn.plateNumber;
        }
        if (this.state.formIn.driverUserName) {
            data.driverUserName = this.formIn.driverUserName;
        }
        if (this.state.formIn.defaultDept !== -1) {
            data.deptId = this.state.formIn.defaultDept;
        }
        queryDistCarList(data)
            .then((res) => {
                console.log("请求车辆管理数量");
                console.log(res);
                this.props.saveCurrentPageCarData(res.pageNumber, res.data);
            })
    }

    //点击导航页
    clickPaginationPage = (page) => {
        console.log("点击的页码 => " + page)
    };

    //展示总共数据
    showToTalView = () => {
        return `共200个`;
    };

    //点击充电详情
    clickChargingDetail = () => {
        console.log("点击充电状态");
    };

    //点击报警详情
    clickWarningDetail = () => {
        console.log("点击报警状态");
    };

    //点击骑行记录
    clickRideRecord = () => {
        this.changeShowTag(0, true)
    };

    //点击车辆编辑
    clickCarEdit = (text, record) => {
        console.log("点击车辆编辑" + text);
        console.log(record);
        this.changeShowTag(1, true,record)

    };

    //点击车主编辑
    clickOwnerEdit = () => {
        console.log("点击车主编辑");
        this.changeShowTag(2, true)
    };

    changeShowTag = (keyTag, boolTag,carMessage) => {

        const newState = {
            showRideRecord: false,
            showEditCar: false,
            showEditOwner: false,
            showAddCar: false,
        };
        if (boolTag) {
            switch (keyTag) {
                case 0:
                    newState.showRideRecord = boolTag;
                    break;
                case 1:
                    newState.showEditCar = boolTag;
                    break;
                case 2:
                    newState.showEditOwner = boolTag;
                    break;
                case 3:
                    newState.showAddCar = boolTag;
                    break;
                default:
                    break;
            }
        }
        if (carMessage) {
            newState.carMessage = carMessage;
        }
        this.setState(newState);
    }


}


const mapState = (state) => {
    console.log("这是mapState收到数据");
    console.log(state.getIn(["carManagerReducer", "carMapData"]));
    return {
        pageNumber: state.getIn(["carManagerReducer", "pageNumber"]),
        carMapData: state.getIn(["carManagerReducer", "carMapData"]),

    };
};

const dispatchMapState = (dispatch) => {
    return {
        saveCurrentPageCarData(page, data) {
            const action = saveCarData(page, data);
            dispatch(action);
        }
    }
};

export default connect(mapState, dispatchMapState)(CarManagerComponent);

const carWrapperStyle = {
    borderRadius: 4,
    width: "80vw",
    height: "100%",
    minWidth: 1200,
    backgroundColor: "#fff",
    margin: '0 auto',
};

const searchWrapperStyle = {
    marginLeft: 10,
    paddingTop: 20,
    marginBottom: 20,
};

const searchSpanStyle = {
    display: "inline-block",
    marginRight: 12,
    fontSize: 14,
};

const inputStyle = {
    width: 150,
    fontSize: 12,
    marginRight: 12,
};

const searchButtonStyle = {
    height: 30,
    marginLeft: 12,
    backgroundColor: "#566bba",
};

const addWrapperStyle = {
    margin: "0 12px",
    height: 44,
    backgroundColor: "#f4f9f8",
    lineHeight: "44px",
};

const addButtonStyle = {
    backgroundColor: "#fff",
    color: "#333",
    textAlign: "center",
    marginLeft: 20,
};
